<template>
  <div class="func-panel">
    <!-- -->
    <div class="func-header start-challenge-btn click-dh" @click="handleStartGame">开启挑战</div>

    <div class="func-other">
      <div class="other-one click-dh" @click="() => $toast('暂未开放')">敬请期待</div>
      <div class="other-other">
        <div class="other-two click-dh" @click="openGamePropModal">游戏道具</div>
        <div class="other-three click-dh" @click="handleDailyAttendance">每日签到</div>
      </div>
    </div>
    <VGamePropModal ref="VGamePropModal"/>
    <daily-attendance-modal ref="dailyAttendanceModal"/>
  </div>
</template>

<script>
import VGamePropModal from '@/components/snake-components/game-prop-panel'
import DailyAttendanceModal from '@/components/snake-components/daily-attendance-modal'
export default {
  name: 'VFunctionPanel',
  components: {
    VGamePropModal,
    DailyAttendanceModal
  },
  data() {
    return {
      
    };
  },

  mounted() {
    // this.openGamePropModal()
  },

  methods: {
    handleStartGame() {
			setTimeout(() => {
        this.$emit('click-start')
      }, 200)
		},
    openGamePropModal() {
      setTimeout(() => {
        this.$refs.VGamePropModal.openModal()
      }, 200)
    },
    handleDailyAttendance() {
      setTimeout(() => {
        this.$refs.dailyAttendanceModal.openModal()
      }, 200)
    }
  },
};
</script>

<style lang="scss">
.func-panel {
  width: 20rem;
  height: 100%;
  /* background-color: bisque; */
  display: flex;
  flex-direction: column;
  align-items: center;
  .start-challenge-btn {
    width: 18rem;
    height: 8rem;
    background-color: rgb(255, 127, 127);
    border-radius: 0.4rem;
    margin: 1rem;
    font-size: 2.4rem;
    text-align: center;
    line-height: 8rem;
    color: rgb(255, 34, 34);
    text-shadow: -.1rem -.1rem 0 rgb(255, 255, 255);
  }
}
.func-other {
  width: 18rem;
  height: 10rem;
  display: flex;
  text-align: center;
  .other-one {
    width: 8.8rem;
    height: 10rem;
    border: 0.1rem solid #fff;
    background-color: #ff0;
    border-radius: 0.4rem;
    line-height: 10rem;
    margin-right: 0.2rem;
  }
  .other-other {
    width: 9rem;
    height: 10rem;
    display: flex;
    flex-direction:column;
    .other-three, .other-two {
      height: 48%;
      width: 100%;
      border: 0.1rem solid #fff;
      background-color: #ff0;
      border-radius: 0.4rem;
      line-height: 5rem;
    }
    .other-two {
      margin-bottom: 2%;
    }
  }
}

</style>